<template>
    <div>
          <!--1.多条件查询栏 -->
          <el-form :inline="true" :model="purchaseSearch" class="demo-form-inline" style="margin-top: 20px;">
            <el-row style="text-align: left;">
                <el-col :span="20" :offset="2">
                    <el-form-item label="商品名称">
                        <el-input v-model="purchaseSearch.productname" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="purchaseSearch.status" placeholder="请选择状态">
                            <el-option label="待采购" value="0"></el-option>
                            <el-option label="已完成" value="1"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button icon="el-icon-search"  type="primary" circle @click="search()"></el-button>
                      
                        <el-button type="primary" @click="clearForm()">清空</el-button>
                    </el-form-item>
               
                </el-col>
            </el-row>
        </el-form>

          <!-- 2.表格 -->
          <el-row style="margin-top: 30px;">
            <el-col :span="20" :offset="2">
                <template>
                    <el-table :data="purchaseList" style="width: 100%">

                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                
                                    <el-form-item label="供应商:" >
                                        <span>{{ props.row.suppliername }}</span>
                                    </el-form-item>
                                    <el-form-item label="商品类型:">
                                        <span>{{ props.row.type }}</span>
                                    </el-form-item>
                           
                                   
                                </el-form>
                            </template>
                        </el-table-column>


                        <el-table-column label="商品名称" width="200">
                            <template slot-scope="scope">
                                <el-tag>{{ scope.row.productname }}</el-tag>
                            </template>
                        </el-table-column>
                    
                        <el-table-column label="采购数量" width="170">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{scope.row.sum }}</span>{{scope.row.uname}}
                            </template>
                        </el-table-column>

                        <el-table-column label="状态" width="200" align="center">
                            <template slot-scope="scope">
                                <div style="margin-left: 10px" :class="binClass(scope.row.status)">
                                    {{binConter(scope.row.status)}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="采购时间" width="250" align="center">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.purtime}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="" align="center" width="150px">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" 
                                    @click="print(scope.$index, scope.row)">打印采购清单</el-button>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                            
                                <el-button  type="success" icon="el-icon-check" round  size="mini"
                                    @click="alterStatus(scope.$index, scope.row)" v-if="scope.row.status==0">完成采购
                                </el-button>  
                                <el-button size="mini" type="danger" 
                                    @click="handleDelete(scope.$index, scope.row)" v-if="scope.row.status==1">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

            </el-col>
        </el-row>

           <!--3.分页 -->
           <el-row style="text-align: center;margin-top: 50px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="purchaseSearch.page" :page-sizes="[2, 4]" :page-size="purchaseSearch.size"
                layout="prev, pager, next, jumper,total, sizes" :total="total">
            </el-pagination>
        </el-row>

        <!-- 3.采购清单 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="closeDialog('ruleForm')">
        <el-form :model="purchase"  ref="ruleForm" align="cneter">
          <el-form-item label="采购清单" :label-width="formLabelWidth" prop="no">
            <el-input v-model="purchase.no" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品名称" :label-width="formLabelWidth" prop="productname">
            <el-input v-model="purchase.productname" autocomplete="off" disabled></el-input>

          </el-form-item>
          <el-form-item label="供应商" :label-width="formLabelWidth" prop="suppliername">
            <el-input v-model="purchase.suppliername" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="联系电话" :label-width="formLabelWidth" prop="contactphone">
            <el-input v-model="purchase.contactphone" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="采购数量" :label-width="formLabelWidth" prop="sum">
            <el-input v-model="purchase.sum" :disabled="true" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单位" :label-width="formLabelWidth" prop="unitname">
            <el-input v-model="purchase.unitname" :disabled="true" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="预估单价" :label-width="formLabelWidth" prop="saleprice">
            <el-input v-model="purchase.saleprice" :disabled="true" autocomplete="off"></el-input>
          </el-form-item>
      
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="cancel">确 定</el-button>
        </div>
      </el-dialog>


    </div>
</template>


<script>


export default{
   data(){
    return{
        purchaseSearch:{
            page :1,
            size :2
        },

        purchaseList:[],
        dialogFormVisible: false,
        formLabelWidth:"150px",
        title: "采购清单",
        purchase:{},

        isPageChangeToOne:true,
        total:0,
        totalPage:0
    }
   },

   methods:{
    cancel(){
        this.dialogFormVisible=false
    },
    binConter(status){
                
                switch (status) {
                    case 0:
                        return '待采购';
                
                    case 1:
                        return '已完成';
                    default:
                        return '';
                }
            },
            binClass(status){
                switch (status) {
                    case 0:
                        return 'tagblue0';
                    case 1:
                        return 'tagblue1';
                 
                    default:
                        return '';
                }
            },
            print(index,row){
                this.purchase=row
                this.dialogFormVisible = true
            },

            alterStatus(index,row){
                this.$axios.put("orderPurchase/alterStatus/"+row.id).then(respData => {
                   if(respData.data.data){
                        this.$message({
                            message : '操作成功！',
                            type :'success'
                        }
                        )
                   }
                   this.search()
                })
            },

            handleDelete(insex,row){
                this.$axios.delete("orderPurchase/deleteById/"+row.id).then(respData =>{
                        if(respData.data.data){
                            this.$message({
                                message:"删除成功！",
                                type:"success"
                            })
                            this.isPageChangeToOne = false
                            this.search()
                            this.isPageChangeToOne=true
                        }
                })
            },

              //3.分页函数
        handleSizeChange(size){
            this.purchaseSearch.size=size;
            this.purchaseSearch.page=1
            this.search()
        },
        handleCurrentChange(page){
            this.isPageChangeToOne=false;
            this.purchaseSearch.page=page;
            this.search()
            this.isPageChangeToOne=true
        } ,
        search(){   
            if(this.isPageChangeToOne){
                this.purchaseSearch.page=1
            }
            this.$axios.post("orderPurchase/getPurchaseList",this.purchaseSearch).then(respData => {
                
                this.purchaseList = respData.data.data.data
                this.total=respData.data.data.total
                this.totalPage=respData.data.data.totalPage
               console.log( this.purchaseList)
            })
         
            
        },
   },

   mounted(){
        this.search()
   }
}
</script>

<style scoped>
 .tagblue0 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #fa556e;
      color: #fa5563;
  }


  .tagblue1{
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #21BD88;
      color: #21BD88;
  }

  .box-card {
  height: auto;
}
.el-dialog .el-form-item {
  text-align: left;
  width: 70%;
}
.el-form-item {
  text-align: left;
  width: 31%;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #409EFF;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
